import React from 'react'
import WrapFormItem from 'components/wrap-form-item'
import { Button, InputNumber, Row, Col, Form, Select, Input } from 'antd'
const FormItem = Form.Item;
const Option = Select.Option;

export default {
  key: 'wrap-form-item',
  name: 'WrapFormItem 表单项',
  author: '张然',
  description: '用于组合多个表单项集成为一个::antd::标准的表单项。',
  isExampleFull: false,
  api: [{
    title: 'API',
    data: [{
      param: 'children', description: '组件内容，可直接写在组件内部，::renderProps::的思想会自带两个参数::values::和::onChange::，需要用这两个参数给内部所有的表单项增加可控的::value::与::onChange::。', type: 'function(onChange, values)', defaultValue: '-'
    }, {
      param: 'formatter', description: '组件值传出时的数据重组，参数为内部维护的一个对象。', type: 'function(values)', defaultValue: 'value => value'
    }, {
      param: 'parser', description: '外部值传入时需要重构为内部结构的规则，内部维护的值是一个对象。', type: 'function(any)', defaultValue: 'value => value || {}'
    }, {
      param: 'onChange', description: '组件值变化时调用。', type: 'function(value)', defaultValue: '-'
    }],
    description: ''
  }],
  example: [
    {
      title: '基本用法',
      description: '本组件用::renderProps::的思想，内部任意组合即可生成一个::antd::标准表单项。',
      state: {},
      getMethod: context => {
        return {
          handleSubmit: e => {
            e.preventDefault();
            context.props.form.validateFieldsAndScroll((err, values) => {
              if (!err) {
                console.log('Received values of form: ', values);
              }
            });
          }
        }
      },
      getContent: context => {
        const { getFieldDecorator } = context.props.form;
        return (
          <Form onSubmit={context.handleSubmit}>
            <FormItem label='集成多个表单项' style={{ marginBottom: 12 }}>
              {getFieldDecorator('test')(
                <WrapFormItem>
                  {(onChange, value) => (
                    <Row gutter={10}>
                      <Col span={10}>
                        <Select
                          style={{ width: '100%' }}
                          onChange={innerValue => onChange(innerValue, 'currency')}
                          value={value.currency}
                          placeholder='请选择'
                        >
                          {['CNY', 'USD', 'JPY'].map(item => <Option key={item}>{item}</Option>)}
                        </Select>
                      </Col>
                      <Col span={14}>
                        <InputNumber
                          onChange={innerValue => onChange(innerValue, 'amount')}
                          value={value.amount}
                        />
                      </Col>
                    </Row>
                  )}
                </WrapFormItem>
              )}
            </FormItem>
            <FormItem>
              <Button type="primary" htmlType="submit">提交</Button>
            </FormItem>
          </Form>
        )
      }
    }, {
      title: 'formatter && parser',
      description: '运用::formatter && parser::思想，让你更容易自定义自己想要的数据结构。',
      state: {},
      getMethod: context => {
        return {
          formatter: value => {
            return value ? `${value.currency || ''}: ${value.amount || ''}` : null
          },
          parser: value => {
            return value ? {
              currency: value.split(': ')[0],
              amount: value.split(': ')[1]
            } : {}
          },
          handleSubmit: e => {
            e.preventDefault();
            context.props.form.validateFieldsAndScroll((err, values) => {
              if (!err) {
                console.log('Received values of form: ', values);
              }
            });
          }
        }
      },
      getContent: context => {
        const { getFieldDecorator } = context.props.form;
        return (
          <Form onSubmit={context.handleSubmit}>
            <FormItem label='集成多个表单项' style={{ marginBottom: 12 }}>
              {getFieldDecorator('test')(
                <WrapFormItem
                  formatter={context.formatter}
                  parser={context.parser}
                >
                  {(onChange, value) => (
                    <Row gutter={10}>
                      <Col span={10}>
                        <Select
                          style={{ width: '100%' }}
                          onChange={innerValue => onChange(innerValue, 'currency')}
                          value={value.currency}
                          placeholder='请选择'
                        >
                          {['CNY', 'USD', 'JPY'].map(item => <Option key={item}>{item}</Option>)}
                        </Select>
                      </Col>
                      <Col span={14}>
                        <InputNumber
                          onChange={innerValue => onChange(innerValue, 'amount')}
                          value={value.amount}
                        />
                      </Col>
                    </Row>
                  )}
                </WrapFormItem>
              )}
            </FormItem>
            <FormItem>
              <Button type="primary" htmlType="submit">提交</Button>
            </FormItem>
          </Form>
        )
      }
    }
  ]
}
